<template>
  <view class="newOrder">
    <view class="form">
      <view class="form_item1">
        <view class="text"> <text>*</text>业务员: </view>
        <view class="input">
          <input v-model="salId" type="text" placeholder="请输入业务员" />
        </view>
      </view>
      <view class="form_item1">
        <view class="text"> <text>*</text>订单日期: </view>
        <view class="input">
          <view class="date">
            <!-- <picker mode="date" :value="orderDay" @change="(e) => bindDateChange(e, 'beginTime')"> -->
            <view @tap="showDate = true" class="select-input">
              <view class="select-input-left">
                <text v-if="orderDay">{{ orderDay }}</text>
                <text style="color: #b2b2b2" v-else>请选择</text>
              </view>
              <u-icon name="arrow-down" color="#272727" size="24rpx"></u-icon>
            </view>
            <!-- </picker> -->
          </view>
        </view>
      </view>
      <view class="form_item1">
        <view class="text"> <text>*</text>应收款: </view>
        <view class="input">
          <input v-model="orderAmt" type="text" placeholder="请输入金额" />
        </view>
      </view>
      <view class="form_item1">
        <view class="text"> <text>*</text>实收款: </view>
        <view class="input">
          <input v-model="realAmt" type="text" placeholder="请输入金额" />
        </view>
      </view>
      <view class="form_item1">
        <view class="text"> <text>*</text>收款方式: </view>
        <view class="input" @tap="openPayPick">
          <view class="date">
            <view class="select-input">
              <view class="select-input-left">
                <text v-if="payChannel!==''">{{ payChannelName }}</text>
                <text style="color: #b2b2b2" v-else>请选择收款方式</text>
              </view>
              <u-icon name="arrow-down" color="#272727" size="24rpx"></u-icon>
            </view>
          </view>
        </view>
        <!-- <view class="input first">
          <select
            v-model="payChannel"
            placeholder="请输入收款方式"
            name=""
            id=""
          >
            <option value="0">现金</option>
            <option value="1">汇单</option>
            <option value="2">银行卡转账</option>
            <option value="3">微信</option>
            <option value="4">支付宝</option>
            <option value="5">银行收款码</option>
          </select>
        </view> -->
      </view>
      <view class="form_item1">
        <view class="text"> 备注: </view>
        <view class="input">
          <input v-model="remark" type="text" placeholder="请输入备注" />
        </view>
      </view>
      <view class="form_item1">
        <view class="text"> 订单号: </view>
        <view class="input">
          <input v-model="orderIdSale" type="text" placeholder="请输入订单号" />
        </view>
      </view>
      <view class="footer_btn">
        <button @tap="submit">提交</button>
        <button @tap="reset">重置</button>
      </view>
    </view>
    <payPick ref="payPick" @confirm="confirmPayType" />
    <myDatePick @bindDateChange="bindDateChange" ref="myDatePick" :show.sync="showDate" />
  </view>
</template>
<script>
import payPick from "../../components/payPick.vue";
import myDatePick from "../../components/myDatePick.vue";
export default {
  components: {
    payPick,
    myDatePick,
  },
  data() {
    return {
      showDate: false,
      // 客户
      cname: "",
      // 业务员
      salId: "",
      // 订单日期
      orderDay: "",
      // 实收款
      realAmt: "",
      payAmt:"",
      // 收款方式
      payChannel: 0,
      payChannelName: "支付宝",
      // 备注
      remark: "",
      // 订单号
      orderIdSale: "",
      cid: "",
      // 应收款
      cusTel: "",
    };
  },
  methods: {
    openPayPick() {
      this.$refs.payPick.open();
    },
    confirmPayType(data) {
      this.payChannel = data.type;
      this.payChannelName = data.name;
    },
    bindDateChange(e, key) {
      this.orderDay = e;
    },
    // 提交
    submit() {
      this.$api
          .flowOrderSaleCreateApi({
            cid: this.cid,
            cname: this.cname,
            cusTel: this.cusTel,
            orderDay: this.orderDay,
            orderIdSale: this.orderIdSale,
            payChannel: this.payChannel,
            realAmt: this.realAmt,
            remark: this.remark,
            salId: this.salId,
            payAmt:this.payAmt
          })
          .then((res) => {
            if (res.code == 200) {
              uni.showToast({
                title:"提交成功",
                duration:1500,
              })

                uni.navigateBack()

              // console.log(res);
            }
          });
    },
    reset() {
      this.cid = "";
      this.user = "";
      this.phone = "";
      this.orderDay = "";
      this.orderIdSale = "";
      this.payChannel = "";
      this.realAmt = "";
      this.remark = "";
      this.salId = "";
    },
  },
  onLoad(option) {
    console.log(option);
    this.cid = option.cid;
    this.cname = option.cname;
  },
};
</script>

<style lang="scss" scoped>
page {
  background: #fff;
  height: 100vh;
}

.newOrder {
  background-color: #f1f1f1;

  .form {
    padding: 0 68rpx 32rpx 68rpx;
    background-color: #fff;
    padding-top: 38rpx;

    .form_item {
      color: #bdbdbd;
      margin-bottom: 36rpx;

      .text {
        font-size: 0.875rem;
        margin-bottom: 22rpx;

        text {
          margin-left: 34rpx;
          color: #fe3430;
        }
      }

      .input {
        display: flex;
        align-items: center;

        input {
          color: #000;
          height: 94rpx;
          width: 434rpx;
          background: #f2f2f2;
          border-radius: 47rpx;
          text-indent: 1em;
        }

        button {
          color: #fff;
          // width: 145rpx;
          height: 75rpx;
          line-height: 75rpx;
          background: #fe3430;
          border-radius: 38rpx;
        }
      }
    }

    .form_item1 {
      color: #bdbdbd;
      margin-bottom: 36rpx;
      text-indent: 1em;

      .text {
        font-size: 0.875rem;
        margin-bottom: 22rpx;

        text {
          color: #fe3430;
        }
      }

      .input {
        display: flex;
        align-items: center;

        select {
          color: #000;
          height: 94rpx;
          width: 100%;
          background: #f2f2f2;
          border-radius: 47rpx;
          text-indent: 1em;
          border: none;
        }

        input {
          color: #000;
          height: 94rpx;
          width: 100%;
          background: #f2f2f2;
          border-radius: 47rpx;
          text-indent: 1em;
        }

        button {
          width: 73rpx;
          height: 38rpx;
          background: #fe3430;
          border-radius: 49rpx;
          color: #fff;
        }
      }
    }

    .btn {
      display: flex;

      button {
        height: 58rpx;
        line-height: 58rpx;
        background: #fe3430;
        border-radius: 49rpx;
        color: #fff;
        margin-left: 0;
        margin-right: 10rpx;
      }
    }
  }

  .footer_btn {
    margin-top: 74rpx;
    display: flex;
    justify-content: space-between;
    padding-bottom: 74rpx;

    button {
      background: url("/static/images/user/button.png");
      background-size: 280rpx 124rpx;
      width: 280rpx;
      height: 124rpx;
      line-height: 96rpx;
      color: #ffffff;
    }
  }

  .first {
    height: 94rpx;
    width: 100%;
    color: #000;
    background: #f2f2f2;
    border-radius: 47rpx;
    border: none;
    padding-right: 20rpx;

    select {
      height: 94rpx;
      width: 100%;
      color: #000;
      background: #f22;
      border-radius: 47rpx;
      border: none;
      padding-right: 20rpx;
    }
  }

  .toast {
    padding: 16rpx 49rpx;
    border-radius: 29rpx;

    .btn {
      display: flex;
      justify-content: space-around;
      padding: 30rpx 0;

      view {
        width: 463rpx;
        height: 97rpx;
        background: rgba(254, 52, 48, 0);
        border: 3rpx solid #272727;
        border-radius: 49rpx;
        line-height: 97rpx;
        text-align: center;
        margin: auto;
      }
    }

    .form {
      border-bottom: 1px solid #f1f1f1;
      padding: 0 0 30rpx 0;

      .select {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .text {
          margin: 20rpx 0;
          color: #bdbdbd;
          margin-right: 20rpx;

          text {
            color: #fe3430;
          }
        }

        input {
          flex: 1;
          text-indent: 1em;
          height: 94rpx;
          background: #f2f2f2;
          border-radius: 47rpx;
          color: #000;
        }

        .input {
          display: flex;
          align-items: center;
          justify-content: space-between;

          input {
            width: 271rpx;
            color: #000;
          }

          text {
            text-align: left;
          }
        }
      }
    }
  }
}

.date {
  width: 100%;
  height: 96rpx;
  background: #f1f1f1;
  border-radius: 47rpx;

  .select-input {
    padding-right: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 96rpx;
    background: #f1f1f1;
    border-radius: 47rpx;
    text-align: left;
    text-indent: 1em;
    color: #000;
    flex: 1;
  }

  picker {
    flex: 1;
  }
}
</style>
